<!--
 * @Author: 夏之一周
 * @Date: 2024-05-09 11:09
 * @Description: 
 * @LastEditors: 夏之一周 <https://wudetian.top>
 * @LastEditTime: 2024-05-09 18:56
-->
<template>
  <div class="register">
    <van-form @submit="onSubmit">
      <div class="top">请填写信息后支付！（精简版）</div>
      <van-field ref="inputname" @blur="myname" v-model="mydata.name" name="真实姓名" label="真实姓名" placeholder="请填写真实姓名" :rules="[{ required: true }]" />
      <van-field v-model="mydata.college" name="院系" label="院系" :rules="[{ required: true }]" placeholder="例: 生物工程学院" />
      <van-field v-model="mydata.class" name="班级" label="班级" :rules="[{ required: true }]" placeholder="例: 生化182" />
      <van-field v-model="mydata.type" label="请假类型" />
      <van-field v-model="mydata.cause" label="请假事由" :rules="[{ required: true }]" placeholder="请假事由" />
      <van-field readonly clickable label="目的地*" :value="'河南省,' + mydata.addresscity" placeholder="选择目的地" @click="showPicker = true" :rules="[{ required: true }]" />
      <!-- 目的地弹出层 -->
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" :rules="[{ required: true }]" />
      </van-popup>
      <van-field v-model="mydata.addressdata" label="详细地址" placeholder="请输入具体地址" />
      <!-- 请假时间 -->
      <van-cell title="开始时间*" title-class="atime" value-class="btime">
        <template><input type="datetime-local" v-model="mydata.startTime" /></template>
      </van-cell>
      <van-cell title="结束时间*" title-class="atime" value-class="btime">
        <template><input type="datetime-local" v-model="mydata.endTime" /></template>
      </van-cell>
      <div class="top">紧急联系人信息</div>
      <van-field v-model="mydata.friend" name="紧急联系人" label="姓名" placeholder="联系人姓名" :rules="[{ required: true }]" />
      <van-field v-model="mydata.relation" name="关系" label="关系" placeholder="联系人关系" :rules="[{ required: true }]" />
      <van-field
        v-model="mydata.phone"
        name="联系电话"
        label="联系电话"
        placeholder="联系电话"
        :rules="[
          {
            required: true,
            pattern: /^1[3-9][0-9]{9}$/,
            message: '请输入正确的手机号',
          },
        ]"
      />
      <div class="top">审批流程信息(英文标点)</div>
      <van-field
        v-model="mydata.mytime"
        name="boos1"
        label="提交时间"
        placeholder="提交时间,例: 10.28 09:43"
        :rules="[
          {
            pattern: /^[0-1][0-9].[0-3][0-9] [0-5][0-9]:[0-5][0-9]$/,
            required: true,
            message: '格式: 10.28 09:43',
          },
        ]"
      />
      <van-field v-model="mydata.boos1name" name="boos1" label="辅导员" placeholder="辅导员姓名" :rules="[{ required: true }]" />
      <van-field
        v-model="mydata.boos1time"
        name="boos1time"
        label="导员同意时间"
        placeholder="审批时间,例: 10.28 09:43"
        :rules="[
          {
            pattern: /^[0-1][0-9].[0-3][0-9] [0-5][0-9]:[0-5][0-9]$/,
            required: true,
            message: '格式: 10.28 09:43',
          },
        ]"
      />
      <!-- <van-field v-model="mydata.boos3name" name="boos3" label="学院副院长" placeholder="学院副院长姓名" />
      <van-field v-model="mydata.boos3time" name="boos3time" label="院长同意时间" placeholder="审批时间,例: 10.28 09:43" />
      <van-field v-model="mydata.monitorname" name="boos3" label="抄送人" placeholder="班长/宿舍长姓名(选填)" /> -->
      <div class="top">年月日时分(提交时间) + 000 + 随机6位数</div>
      <van-field
        v-model="mydata.id"
        label="审批编号"
        placeholder="例:202210280915000232765"
        :rules="[
          {
            pattern: /^2022[0-1][0-9][0-3][0-9][0-2][0-9][0-6][0-9]000[0-9]{6}$/,
            required: true,
            message: '审批编号格式错误',
          },
        ]"
      />
      <div class="top">个人相关图片</div>
      <div class="flexbox">
        <van-uploader v-model="mysymbol" upload-text="个人头像(选填)" multiple :max-count="1" :max-size="500 * 1024" @oversize="onOversize" />
        <van-uploader v-model="picture" multiple :max-count="1" upload-text="个人钉钉自拍" :max-size="2.1 * 500 * 1024" @oversize="onOversize2" :rules="[{ required: true }]" />
        <van-uploader v-model="mysign" multiple :max-count="1" upload-text="个人签名" :rules="[{ required: true }]" />
      </div>
      <div class="top">领导相关图片</div>
      <div class="flexbox">
        <van-uploader v-model="boos1symbol" upload-text="导员头像(选填)" multiple :max-count="1" :max-size="500 * 1024" @oversize="onOversize" />
        <van-uploader v-model="boos1sign" multiple :max-count="1" upload-text="导员签名" :rules="[{ required: true }]" />
      </div>
      <div class="top">跳转支付后 回到当前界面 查看密码！！</div>
      <!-- 提交按钮 -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"> 提交并支付 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import API from "../api/index.js";
export default {
  name: "Register",
  data() {
    return {
      showPicker: false,
      pattern: "",
      columns: [
        {
          text: "某某市",
          children: [
            {
              text: "某某县",
              children: [{ text: "某某镇" }, { text: "某某1镇" }, { text: "某某经济开发区" }],
            },
            {
              text: "某某2区",
              children: [{ text: "某某街道" }, { text: "某某小区街道" }, { text: "某某工业园区" }, { text: "某某开发区街道" }, { text: "某某文化街街道" }, { text: "某某镇" }, { text: "某某街街道" }],
            },
            {
              text: "某某3区",
              children: [{ text: "某某路街道" }, { text: "某某乡" }, { text: "某某n路街道" }, { text: "某某干道街道" }],
            },
            {
              text: "某某4区",
              children: [{ text: "某某街街道" }, { text: "某某8镇" }, { text: "某某9路街道" }],
            },
          ],
        },
      ],
      payid: "",
      picture: [],
      mydata: {
        id: "",
        password: Date.now().toString().slice(7),
        name: "",
        type: "病假",
        college: "",
        class: "",
        startTime: "",
        endTime: "",
        cause: "",
        addresscity: "......点击选择 ",
        addressdata: "",
        friend: "",
        relation: "",
        phone: "",
        // monitorname: "",
        mytime: "",
        boos1name: "",
        boos1time: "",
        boos1grade: "辅导员审核",
        // boos2name: "",
        // boos2time: "",
        // boos2grade: "党总支副书记审批",
        // boos3name: "",
        // boos3time: "",
        // boos3grade: "副院长审批",
        monitorimg: "",
        mysymbol: "",
        mysign: "",
        boos1symbol: "",
        boos1sign: "",
      },
      monitorimg: [],
      mysymbol: [],
      mysign: [],
      boos1symbol: [],
      boos1sign: [],
    };
  },
  watch: {
    monitorimg: {
      deep: true,
      handler(newvalue) {
        this.mydata.monitorimg = newvalue[0].content;
      },
    },
    mysymbol: {
      deep: true,
      handler(newvalue) {
        this.mydata.mysymbol = newvalue[0].content;
      },
    },
    mysign: {
      deep: true,
      handler(newvalue) {
        this.mydata.mysign = newvalue[0].content;
      },
    },
    boos1symbol: {
      deep: true,
      handler(newvalue) {
        this.mydata.boos1symbol = newvalue[0].content;
      },
    },
    boos1sign: {
      deep: true,
      handler(newvalue) {
        this.mydata.boos1sign = newvalue[0].content;
      },
    },
  },
  methods: {
    onConfirm(value) {
      this.mydata.addresscity = `${value[0]},${value[1]},${value[2]}`;
      this.showPicker = false;
    },
    myname() {
      this.mydata = JSON.parse(localStorage.getItem(this.mydata.name)) || this.mydata;
      this.mydata.password = Date.now().toString().slice(7);
    },
    onOversize() {
      this.$toast("图片大小不能超过 500kb");
    },
    onOversize2() {
      this.$toast("图片大小不能超过 1024kb");
    },
    onSubmit() {
      //显示提交中
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 5000,
      });
      const endTime = Date.parse(this.mydata.endTime);
      const startTime = Date.parse(this.mydata.startTime);
      if (endTime < startTime) {
        return this.$toast.fail("请假时间出错");
      }
      localStorage.setItem(this.mydata.name, JSON.stringify(this.mydata));
      let formData = new FormData();
      formData.append("picture", this.picture[0].file);
      let data = this.mydata;
      for (const key in data) {
        formData.append(key, data[key]);
      }
      this.$axios({
        method: "POST",
        url: API.register,
        headers: {
          "content-type": "multipart/form-data",
        },
        data: formData, // 请求体参数
      })
        .then((response) => {
          // 处理请求的结果
          if (response.data == "no") {
            this.$toast.success("提交失败");
            return;
          } else {
            // 发起支付
            this.$dialog
              .confirm({
                title: "支付状态",
                message: "",
                confirmButtonText: "支付成功",
                cancelButtonText: "暂不支付",
                confirmButtonColor: "#ff0000",
              })
              .then(() => {
                this.aplay();
              })
              .catch(() => {
                this.quxiao();
              });
            this.payid = Date.now().toString();
            this.$axios({
              method: "post",
              url: API.alipay,
              // 请求体参数
              data: {
                name: this.mydata.name,
                detail: "自助假条订单",
                totalAmount: "0.66",
                id: this.payid,
              },
            })
              .then((response) => {
                window.open(response.data,'_black')
              })
              .catch((err) => {
                console.error(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    aplay() {
      // 发起验证请求 通过：弹出密码   不通过：提示支付失败
      this.$axios({
        method: "post",
        url: API.alipayQuery,
        data: {
          id: this.payid,
        },
      })
        .then((response) => {
          let msg = response.data == "支付成功" ? `用户名：${this.mydata.name} ，密码:${this.mydata.password}` : response.data;
          this.$dialog
            .alert({
              title: "Are you sure？",
              message: msg,
            })
            .then(() => {
              this.payid = "";
              this.$router.replace({ name: "Login" });
            });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    quxiao() {
      this.payid = "";
    },
  },
};
</script>

<style>
.van-cell__value {
  padding-left: 1em;
}
.register {
  width: 100vw;
  overflow-x: hidden;
}
.top {
  height: 5vh;
  width: 100vw;
  line-height: 5vh;
  text-align: center;
  background: rgb(231, 231, 231);
}
.flexbox {
  display: flex;
  justify-content: space-around;
}
.alipay {
  position: fixed;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  top: 30vh;
  width: 80vw;
  height: 20vh;
  left: 10vw;
  z-index: 999;
  color: aliceblue;
  text-align: center;
  background: rgba(0, 0, 0, 0.801);
}
.alipay h2 {
  margin-top: 2vh;
  width: 100%;
}
.atime {
  width: 25vw;
  flex: none !important;
  -webkit-flex: none !important;
  -webkit-box-flex: none !important;
}
.btime {
  float: left;
  flex: none !important;
  -webkit-flex: none !important;
  -webkit-box-flex: none !important;
}
</style>
